<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="iOS Privacy Manifest Generator - Generate privacy.xcprivacy files with ease">
    <title>iOS Privacy Manifest Generator</title>
    
    <!-- Preload critical resources -->
    <link rel="preload" href="style.css" as="style">
    <link rel="preload" href="script.js" as="script">
    
    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="resources/favicon.png">
</head>
<body class="bg-light">
    <!-- Loading Overlay -->
    <div id="loading-overlay" class="loading-overlay">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <!-- Header -->
    <header class="bg-primary text-white py-4 mb-4">
        <div class="container">
            <div class="row align-items-center">
                <div class="col">
                    <h1 class="mb-0">iOS Privacy Manifest Generator</h1>
                    <p class="mb-0 opacity-75">Generate privacy.xcprivacy files with ease</p>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <div class="container">
        <div class="row g-4">
            <!-- Configuration Section -->
            <div class="col-lg-8">
                <!-- API Types Section -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                        <h5 class="mb-0">
                            <i class="bi bi-gear-fill text-primary me-2"></i>API Types
                        </h5>
                        <button class="btn btn-primary btn-sm" id="addAPIType">
                            <i class="bi bi-plus-lg"></i> Add API Type
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="apiTypesContainer">
                            <!-- API Type items will be added here -->
                        </div>
                        <div id="noAPITypesMessage" class="text-center text-muted py-4">
                            <i class="bi bi-info-circle-fill mb-2 display-6"></i>
                            <p class="mb-0">No API types added. Click the "Add API Type" button to start.</p>
                        </div>
                    </div>
                </div>

                <!-- Data Collection Section -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                        <h5 class="mb-0">
                            <i class="bi bi-database-fill text-primary me-2"></i>Data Collection
                        </h5>
                        <button class="btn btn-primary btn-sm" id="addDataCollection">
                            <i class="bi bi-plus-lg"></i> Add Data Type
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="dataCollectionContainer">
                            <!-- Data Collection items will be added here -->
                        </div>
                        <div id="noDataCollectionMessage" class="text-center text-muted py-4">
                            <i class="bi bi-info-circle-fill mb-2 display-6"></i>
                            <p class="mb-0">No data types added. Click the "Add Data Type" button to start.</p>
                        </div>
                    </div>
                </div>

                <!-- Tracking Section -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0">
                            <i class="bi bi-eye-fill text-primary me-2"></i>Tracking
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="trackingToggle">
                            <label class="form-check-label" for="trackingToggle">
                                Enable App Tracking Transparency
                            </label>
                        </div>
                        <small class="text-muted d-block mt-2">
                            Enable this if your app uses tracking as defined by App Tracking Transparency.
                        </small>
                    </div>
                </div>
            </div>

            <!-- Preview Section -->
            <div class="col-lg-4">
                <div class="card shadow-sm sticky-top" style="top: 20px;">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                        <h5 class="mb-0">
                            <i class="bi bi-code-slash text-primary me-2"></i>XML Preview
                        </h5>
                        <button class="btn btn-primary btn-sm" id="copyButton">
                            <i class="bi bi-clipboard"></i> Copy
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <pre class="mb-0"><code class="xml" id="xmlPreview"></code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Templates -->
    <template id="apiTypeTemplate">
        <div class="api-type-item mb-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">API Type</label>
                        <select class="form-select api-type-select" required>
                            <option value="" disabled selected>-- Select an API Type --</option>
                        </select>
                    </div>
                    
                    <!-- 收集目的列表容器，初始隐藏 -->
                    <div class="collection-purposes-section" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">Collection Purposes</label>
                            <div class="api-purposes-container">
                                <!-- 动态加载的收集目的选项将显示在这里 -->
                            </div>
                            <small class="text-muted d-block mt-2">
                                Select one or more purposes for using this API.
                            </small>
                        </div>
                    </div>

                    <div class="text-end">
                        <button class="btn btn-outline-danger btn-sm remove-api-type">
                            <i class="bi bi-trash"></i> Remove
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template id="dataCollectionTemplate">
        <div class="data-collection-item mb-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Data Type</label>
                        <select class="form-select data-type-select">
                            <option value="">Select Data Type</option>
                        </select>
                        <div class="data-type-description text-muted small mt-2"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Collection Purposes</label>
                        <div class="purposes-container">
                            <div class="form-check mb-2">
                                <input class="form-check-input purpose-checkbox" type="checkbox" value="NSPrivacyCollectedDataTypePurposeAppFunctionality" id="purpose1">
                                <label class="form-check-label" for="purpose1">App Functionality</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input purpose-checkbox" type="checkbox" value="NSPrivacyCollectedDataTypePurposeAnalytics" id="purpose2">
                                <label class="form-check-label" for="purpose2">Analytics</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input purpose-checkbox" type="checkbox" value="NSPrivacyCollectedDataTypePurposeProductPersonalization" id="purpose3">
                                <label class="form-check-label" for="purpose3">Product Personalization</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input purpose-checkbox" type="checkbox" value="NSPrivacyCollectedDataTypePurposeThirdPartyAdvertising" id="purpose4">
                                <label class="form-check-label" for="purpose4">Third Party Advertising</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input purpose-checkbox" type="checkbox" value="NSPrivacyCollectedDataTypePurposeDeveloperAdvertising" id="purpose5">
                                <label class="form-check-label" for="purpose5">Developer Advertising</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input purpose-checkbox" type="checkbox" value="NSPrivacyCollectedDataTypePurposeAccountManagement" id="purpose6">
                                <label class="form-check-label" for="purpose6">Account Management</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input purpose-checkbox" type="checkbox" value="NSPrivacyCollectedDataTypePurposeOther" id="purpose7">
                                <label class="form-check-label" for="purpose7">Other</label>
                            </div>
                        </div>
                        <small class="text-muted d-block mt-2">
                            Select one or more purposes for collecting this data type.
                        </small>
                    </div>
                    <div class="text-end">
                        <button class="btn btn-outline-danger btn-sm remove-data-type">
                            <i class="bi bi-trash"></i> Remove
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" crossorigin="anonymous" defer></script>
    <script src="script.js" defer></script>
    
    <!-- Auto-save notification -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="autoSaveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <i class="bi bi-check-circle-fill text-success me-2"></i>
                <strong class="me-auto">Auto Save</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Your changes have been automatically saved.
            </div>
        </div>
    </div>
</body>
</html>
